<template>
    <header>
        <div  @click="$router.push('/')" class="logo"></div><div class="title">运营管理系统</div>
        <div class="r-block">
            <el-dropdown @command="handleCommand" @visible-change="handleChangeDrop">
                <span class="el-dropdown-link">
                    <img :src="avatarUrl">
                    <span>{{trueName}}</span>
                    <i class="down" v-if="arrowShow"></i>
                    <i class="top" v-else></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">重置密码</el-dropdown-item>
                    <el-dropdown-item command="1">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
export default {
    data () {
        return {
            arrowShow: true,
            menuShow:false,
            avatarUrl: "",
            trueName: ""
        }
    },
    created(){

    },
    mounted(){
        this.avatarUrl = common.getCookie("avatarUrl")
        this.trueName = common.getCookie("trueName")

        console.log(this.avatarUrl,'aaadd')
    },
    methods:{
        handleCommand(command){
            if(command == '1'){
                let url = CONSTANT.URL.ADMIN.LOGOUT,
                param={};
                common.requestAjax(url,param,{},(res)=>{
                })
                this.$router.push("/loginPage");
            }else{
                this.$router.push("/rechargePassword");
            }
        },
        handleChangeDrop(val) {
            if (val) {
                this.arrowShow = false
            } else {
                this.arrowShow = true
            }

        }
    }
}
</script>

<style lang="scss" scoped>
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    font-size: 18px;
    line-height: 90px;
    background-color: #fff;
    color: #fff;
    z-index: 9999;
    font-size: 25px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid rgba(225,225,225,0.8);
    .logo{
        cursor:pointer;
        float: left;
        margin-top: 15px;
        margin-left: 40px;
        width: 251px;
        height: 60px;
        color: #fff;
        background-size: 100%;
        background-image: url(../../images/logo.png);
        margin-right: 14px;
    }
    .title{
        font-size: 14px;
        float: left;
    }
}
.r-block {

    float: right;
    margin-right: 40px;

    .el-dropdown-link{
        display: flex;
        -webkit-display: flex;
        align-items: center;
        -webkit-align-items: center;
        cursor: pointer;
        span{
            color: #333;
        }

        img{
            position: relative;
            margin-right: 10px;
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        i {
            margin-left: 10px;
            width: 16px;
            height: 8px;
        }
        i.down{
            background: url(../../images/arrow-down.png) 0 0 no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }
        i.top{
            background: url(../../images/arrow-top.png) 0 0 no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }
    }
}

@media screen and (max-width: 1440px) {
    header {
        height: 85px;
    }
}
@media screen and (min-width: 1441px) and (max-width: 1600px) {
}


</style>
